<html>

<head>
  <link rel="stylesheet" type="text/css" href="./style.css">

  <script src="./KiwiChart.js"></script>
  
  <script>
    window.onload = function(){
      var positive_small_integers = Array();
      positive_small_integers[0] = 1;
      positive_small_integers[1] = 2;
      positive_small_integers[2] = 5;
      positive_small_integers[3] = 9;
      positive_small_integers[4] = 3;
      positive_small_integers[5] = 4;
      positive_small_integers[6] = 3;
      positive_small_integers[7] = 1;
      positive_small_integers[8] = 1;
      positive_small_integers[9] = 1;

      var kiwi_barchart = new KiwiBarChart('BAR_positive_small_integers');
      kiwi_barchart.setTitle("positive small integers", 35);
      kiwi_barchart.setPlotColor('bar', "gray");
      kiwi_barchart.setPlotData('bar', positive_small_integers);
      
      var positive_small_floats = Array();
      positive_small_floats[0] = 0.1;
      positive_small_floats[1] = 0.2;
      positive_small_floats[2] = 0.5;
      positive_small_floats[3] = 0.9;
      positive_small_floats[4] = 0.3;
      positive_small_floats[5] = 0.4;
      positive_small_floats[6] = 0.3;
      positive_small_floats[7] = 0.1;
      positive_small_floats[8] = 0.1;
      positive_small_floats[9] = 0.1;
      
      var kiwi_barchart = new KiwiBarChart('BAR_positive_small_float');
      kiwi_barchart.setTitle("positive small floats", 35);
      kiwi_barchart.setPlotColor('bar', "gray");
      kiwi_barchart.setPlotData('bar', positive_small_floats);
      
      var positive_large_integers = Array();
      positive_large_integers[0] = 10000;
      positive_large_integers[1] = 20000;
      positive_large_integers[2] = 50000;
      positive_large_integers[3] = 90000;
      positive_large_integers[4] = 30000;
      positive_large_integers[5] = 40000;
      positive_large_integers[6] = 30000;
      positive_large_integers[7] = 10000;
      positive_large_integers[8] = 10000;
      positive_large_integers[9] = 10000;

      var kiwi_barchart = new KiwiBarChart('BAR_positive_large_integers');
      kiwi_barchart.setTitle("positive large integers", 35);
      kiwi_barchart.setPlotColor('bar', "gray");
      kiwi_barchart.setPlotData('bar', positive_large_integers);
      
      var positive_large_floats = Array();
      positive_small_floats[0] = 10000.00001;
      positive_small_floats[1] = 20000.00002;
      positive_small_floats[2] = 50000.00005;
      positive_small_floats[3] = 90000.00009;
      positive_small_floats[4] = 30000.00003;
      positive_small_floats[5] = 40000.00004;
      positive_small_floats[6] = 30000.00003;
      positive_small_floats[7] = 10000.00001;
      positive_small_floats[8] = 10000.00001;
      positive_small_floats[9] = 10000.00001;
      
      var kiwi_barchart = new KiwiBarChart('BAR_positive_large_float');
      kiwi_barchart.setTitle("positive large float", 35);
      kiwi_barchart.setPlotColor('bar', "gray");
      kiwi_barchart.setPlotData('bar', positive_small_floats);
      
      var manaDistribution = Array();
      manaDistribution['white'] = 1;
      manaDistribution['blue'] = 1;
      manaDistribution['green'] = 1;
      manaDistribution['yellow'] = 1;
      
      var kiwi_piechart = new KiwiPieChart('pie_chart');
      //kiwi_piechart.setTitle("Mana distribution", 35);
      kiwi_piechart.setPlotData('bar', manaDistribution);
      kiwi_piechart.setPlotData('bar2', manaDistribution);
      //kiwi_piechart.setPieColorwheel('manual', ['red', 'green']);
    };
  </script>
</head>

<body>
  <h1>Bar charts</h1>
  <canvas id="BAR_positive_small_integers" height="250" width="500"></canvas>
  <canvas id="BAR_positive_small_float" height="250" width="500"></canvas>
  <canvas id="BAR_positive_large_integers" height="250" width="500"></canvas>
  <canvas id="BAR_positive_large_float" height="250" width="500"></canvas>
  <h1>Pie charts</h1>
  <canvas id="PIE_1_value" height="250" width="500"></canvas>
  <canvas id="PIE_2_values" height="250" width="500"></canvas>
  <canvas id="PIE_8_values" height="250" width="500"></canvas>
  <canvas id="PIE_20_values" height="250" width="500"></canvas>
</body>

</html>